<!--本组件用于快速搜索并选择需要的数据，支持单选或多选-->


<template>

  <div class="speed-search-container">
    <div class="section-pot" @click="changeShowFlag">
      <el-tag v-for="(item,index) in checkedList"
              :key="item.orgCode"
              closable
              type="success"
              @close="deleteItem(item.orgCode)"
      >
        {{item.orgName}}

      </el-tag>
    </div>
    <!--快速搜索框容器-->
    <el-dialog

        title="快速搜索"
        :visible.sync="dialogVisible"
        width="60%">
      <!--搜选框容器-->
      <div class="search-select-pot">
        <!--左侧内容器-->
        <div class="left-box">
          <!--搜索框容器样式-->
          <div class="search-box">
            <el-input
                placeholder="请输入关键字"
                v-model="keywords"
                @keyup.enter.native="getSelectList(keywords)"
                clearable>
            </el-input>
          </div>
          <!--选择列表容器-->
          <ul class="select-list-box">
            <!--添加滚动条-->
            <el-scrollbar>
              <!--选择列表条目容器-->
              <el-checkbox-group v-model="commitList">
                <el-checkbox v-for="(item,index) in selectList" :label="item.orgCode">{{ item.orgName }}</el-checkbox>
              </el-checkbox-group>
            </el-scrollbar>
          </ul>
        </div>
        <!--右侧内容器-->
        <div class="right-box">
          <!--统计容器-->
          <div class="count-box">
            <span>已选：{{ commitList.length }} 个</span>
          </div>
          <!--提交列表容器-->
          <ul class="commit-list-box">
            <el-scrollbar>
              <!--提交列表条目容器-->
              <li class="commit-item-box" v-for="item of checkList">
                <span>{{ item.orgName }}</span>
                <i class="el-icon-close" @click="removeItem(item.orgCode)"></i>
              </li>
            </el-scrollbar>
          </ul>

        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
    <el-button size="mini" type="primary" @click="submit">确 定</el-button>
  </span>
    </el-dialog>
  </div>


</template>

<script>
import {querySelectList} from '@/api/system/org.js';
import {ORG_TYPE} from "@/constantData";

export default {
  name: 'SpeedSearch',
  props: {
    queryType: {
      type: [Number, String],
      default: ORG_TYPE.ALL
    },
    value:{  //此处要与model配置项中的prop值一致
      type:Array  //以数组形式接收数据
    },
  },
  //此配置是为了能在使用该组件标签时，在组件标签中使用v-modle，从而将此组件中的数据传给到父组件中。
  model: {
    prop: 'value',
    event: 'change'  //此处自定义的事件，可用来来传值给父组件
  },
  data: function () {
    return {
      dialogVisible: true,  //页面是否显示
      keywords: '', //获取用户输入的关键字
      //选择列表数组
      // selectList: Array.from(Array(300)).map((item, index) => {
      //   return {id: `id${index}`, name: `张${index + 1}`}
      // }),
      selectList: [],
      //提交列表数组其中元素都是id
      commitList: [],
      //用于存放要放入文本框中的数组
      checkedList:[],
    }
  },
  computed: {
    checkList:{
      cache:false,
      //当提交列表数组中的元素发生改变时即可通过提交列表元素从选择列表中筛选出新的数组作为最终确定的数组
      get() {
        //提前将this中的值解构赋值给两个变量这样下边就不用this.属性了
        let {commitList, selectList} = this

        return selectList.filter(item => commitList.some(orgCode => orgCode == item.orgCode))
      },
    },

  },
  methods: {
    //确定按钮回调函数//此步为避免在点确定前页面显示框就更新数据，故多加一步让确定按钮控制
    submit(){
      //深度克隆checkList数组给到checkedList数组
      this.checkedList = _.cloneDeep(this.checkList)
      this.dialogVisible = false  //点确定后退出弹框
      //激发事件将该事件对应的数据给到父组件
      this.$emit('change',this.checkedList )
    },
    //退出按钮回调函数
    changeShowFlag: function () {
      this.dialogVisible = !this.dialogVisible;
    },
    //删除按钮回调函数
    removeItem: function (orgCode) {
      //此步的意义为过滤掉要删除的元素
      this.commitList = this.commitList.filter(k => k !== orgCode);
    },
    //搜索框回车键盘事件回调函数
    // getSelectList: function (keywords) {
    //   let own = this;
    //   return new Promise((resolve, reject) => {
    //     querySelectList({keyword: keywords, orgFindType: this.queryType}).then(res => {
    //       own.selectList = res.data;
    //       resolve()
    //     })
    //   })
    //
    // },
    getSelectList:function (keywords) {
      let own = this;
      querySelectList({keyword: keywords, orgFindType: this.queryType}).then(res => {
        own.selectList = res.data;
        //own.commitList = own.value;

      })
    },
    //页面输入框删除按钮回调函数
    deleteItem:function (orgCode){

      this.removeItem(orgCode) //先删除commitList数组中的元素
      this.submit() //刷新页面显示框中的已选项
    }

  },
  // created() {
  //   //在页面渲染前先发一次请求使用户在页面上可以看到要搜的全部内容
  //   this.getSelectList('').then(res =>{
  //     //将父元素中传入的数据放入到commitList数组中
  //     console.log('value数组：'+this.value);
  //     this.commitList = this.value;
  //
  //     console.log('commitList数组：'+this.commitList);
  //   })
  // },
  created() {
    this.getSelectList('');
    this.commitList = this.value;
  }

}
</script>

<style lang="scss" scoped>

// 设置快速搜索框容器样式
.speed-search-container {
  $inner-box-width: 100%;
  $childen-box-width: 95%;
  //设置组件界面
  .section-pot{
    width: 400px;
    height: 50px;
    border: 1px solid #BBFFAA;
    //设置内部元素位置
    display: flex;
    align-items: center;
    //设置el-tag样式
    .el-tag{
      margin-left: 5px;
    }
  }
  // 设置搜选框容器样式
  .search-select-pot {
    width: $inner-box-width;
    height: 50vh;
    margin: 0 auto;
    border: 1px solid rgba(144, 147, 153, 0.3);
    border-radius: 9px; //设置贺角
    //设置内部容器位置
    display: flex;
    align-items: center;
    //设置左侧容器样式
    .left-box {
      width: calc(55% - 1px);
      height: 100%;
      border-right: 1px solid rgba(144, 147, 153, 0.3);
      //设置搜索框容器样式
      .search-box {
        width: $childen-box-width;
        margin: 10px auto;
      }

      //设置选择列表容器样式
      .select-list-box {
        width: $childen-box-width;
        margin: 0 auto;
        height: calc(100% - 60px);
        list-style: none;
        padding-left: 0;
        //设置复选框垂直排列
        .el-checkbox-group {
          display: flex;
          flex-direction: column;
        }


        //设置选择列表条目容器样式
        .select-item-box {
          width: 100%;
        }
      }

    }

    //设置左侧容器样式
    .right-box {
      width: 45%;
      height: 100%;
      //设置统计容器样式
      .count-box {
        width: $childen-box-width;
        height: 40px;
        line-height: 40px;
        margin: 10px auto;
        //设置文本居中
        vertical-align: middle;

      }

      // 设置提交列表容器样式
      .commit-list-box {
        width: $childen-box-width;
        height: calc(100% - 60px);
        margin: 0 auto;
        list-style: none;
        padding-left: 0;
        // 设置提交列表条目容器样式
        .commit-item-box {
          width: 100%;
          //设置内部元素位置
          display: flex;
          align-items: center;
          justify-content: space-between;
          //设置字体样式
          font-size: 14px;
          //设置删除按钮位置
          i {
            margin-right: 10px;

            &:hover {
              color: red;
              cursor: pointer;
            }
          }
        }
      }

    }
  }
}
</style>